<template>
  <el-dialog :model-value="modelValue" title="选择工艺路线" width="800px" @close="onClose">
    <div class="filters">
      <el-input v-model="kw" placeholder="请输入路线编码/名称" clearable style="width: 260px;" />
      <el-button type="primary" @click="onQuery">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </div>

    <el-table :data="rows" border stripe height="420" @selection-change="onSelChange" :loading="loading">
      <el-table-column type="selection" width="48" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="flowNo" label="工序编码" width="160" />
      <el-table-column prop="name" label="工序名称" min-width="180" />
      <el-table-column prop="stepCount" label="步骤数" width="100" />
      <template #empty>
        <div class="empty">暂无数据</div>
      </template>
    </el-table>

    <div class="pager">
      <div>共 {{ total }} 条</div>
      <div class="right">
        <el-select v-model="pageSize" style="width: 100px; margin-right: 8px;">
          <el-option :value="5" label="5条/页" />
          <el-option :value="10" label="10条/页" />
          <el-option :value="20" label="20条/页" />
        </el-select>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:current-page="currentPage" />
      </div>
    </div>

    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" :disabled="!selected.length" @click="onConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import ERP from '@/utils/Interceptors'

const props = defineProps<{ modelValue: boolean }>()
const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void; (e: 'confirm', rows: any[]): void }>()

const kw = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const rows = ref<any[]>([])
const total = ref(0)
const selected = ref<any[]>([])

async function loadData() {
  loading.value = true
  try {
    const { data } = await ERP.get('/api/ProcessRoutes', {
      params: {
        kw: kw.value || undefined,
        page: currentPage.value,
        pageSize: pageSize.value,
      }
    })
    rows.value = data?.items || []
    total.value = data?.total || 0
  } finally {
    loading.value = false
  }
}

function onSelChange(list: any[]) { selected.value = list }
function onQuery() { currentPage.value = 1; loadData() }
function onReset() { kw.value = ''; currentPage.value = 1; loadData() }
function onClose() { emit('update:modelValue', false) }
function onConfirm() { emit('confirm', selected.value); onClose() }

watch(() => props.modelValue, (v) => { if (!v) selected.value = []; if (v) loadData() })
watch([currentPage, pageSize], () => loadData())
</script>

<style scoped>
.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.empty { padding: 24px; text-align: center; color: #999; }
</style>
